<template>
  <el-aside
    :width="isCollapse ? '64px' : '200px'"
    style="background-color: #fff; transition: 0.4s"
  >
    <!-- <el-switch v-model="isCollapse" width="63px" /> -->
    <el-menu
      :default-active="route.name"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
      background-color="#fff"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>111</span>
        </template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
        <el-sub-menu index="1-4">
          <template #title><span>item four</span></template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>222</template>
      </el-menu-item>
      <!-- 毕宝鑫 -->
      <el-sub-menu index="visual">
        <template #title>
          <el-icon><Postcard /></el-icon>
          <span>图表定制</span>
        </template>
        <el-menu-item index="visual">大屏可视化</el-menu-item>
      </el-sub-menu>

      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>444</template>
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon><setting /></el-icon>
        <template #title>444</template>
      </el-menu-item>
      <el-menu-item index="6">
        <el-icon><setting /></el-icon>
        <template #title>444</template>
      </el-menu-item>
      <el-menu-item index="7">
        <el-icon><setting /></el-icon>
        <template #title>444</template>
      </el-menu-item>
      <el-menu-item index="8">
        <el-icon><setting /></el-icon>
        <template #title>444</template>
      </el-menu-item>
      <el-menu-item index="9">
        <el-icon><setting /></el-icon>
        <template #title>444</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Postcard,
  Menu as IconMenu,
  Location,
  Setting
} from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  router.push({ name: key })
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
